<template>
  <el-dialog :title="title"
    :visible.sync="show"
    width="650px"
    append-to-body
    @close="closeBox">
    <div class="lifeProjectDetail_content">
      <div class="lifeProjectDetail_title">{{selectDateStr}}</div>
      <div class="life_detail_list">
        <div class="life_detail_item"
          v-for="(item, idx) in detailList"
          :key="idx">
          <div class="life_detail_item_top">
            <div class="life_detail_item_top_1">{{item.time}}</div>
            <div class="life_detail_item_top_2">{{item.customerName}} {{item.phone}}</div>
            <div class="life_detail_item_top_3">{{item.levelName}}</div>
            <div class="life_detail_item_top_4">服务状态：{{item.serviceStatusStr}}</div>
          </div>
          <el-table :data="item.list"
            border>
            <el-table-column label="项目名称"
              align="center"
              prop="serviceName" />
            <el-table-column label="服务时长"
              align="center">
              <template slot-scope="scope">
                <span>{{scope.row.isMainTime? scope.row.itemServiceDuration: scope.row.itemComposeDuration}}</span>
              </template>
            </el-table-column>
            <el-table-column label="耗卡金额"
              align="center"
              prop="settlementPriceStr" />
          </el-table>
          <div class="life_detail_item_remak">
            <div class="life_detail_item_remak_label">备注信息：</div>
            <div class="life_detail_item_remak_content">
              <el-input type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="item.customerMsg">
              </el-input>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer"
      class="dialog-footer"
      style="text-align: center">
      <el-button @click="toSubmit">确定</el-button>
      <el-button @click="closeBox">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  lifiWorkDetial,
  saveSubscribeInfo,
} from "@/api/service/workbench";

export default {
  data () {
    return {
      detailList: []
    }
  },
  props: {
    beauticianName: {
      type: String,
      default: ''
    },
    show: {
      type: Boolean,
      default: false
    },
    selectDay: {
      type: String,
      default: ''
    },
    selectUid: {
      type: [String, Number],
      default: ''
    },
  },
  computed: {
    title () {
      return `美容师：${this.beauticianName}`
    },
    selectDateStr () {
      let dates = this.selectDay.split('-')
      return `${dates[1]}月${dates[2]}日`
    }
  },
  created () {
    this.getDetail()
  },
  methods: {
    async getDetail () {
      let res = await lifiWorkDetial({
        uid: this.selectUid,
        Date: this.selectDay
      })
      if (res) {
        let { data } = res
        data.forEach(items => {
          let list1 = [], list2 = [],
            longTime = 0, lognTimeId = '',
            longTime2 = 0, lognTimeId2 = ''
          items.list.forEach(item => {
            if (item.isMaster == '1') {
              list1.push(item)
              if (item.itemServiceDuration > longTime) {
                longTime = item.itemServiceDuration
                lognTimeId = item.detailId
              }
            } else {
              list2.push(item)
              if (item.itemServiceDuration > longTime2) {
                longTime2 = item.itemServiceDuration
                lognTimeId2 = item.detailId
              }
            }
          })

          if (list1.length > 0) {
            list1.forEach(item => {
              if (item.detailId == lognTimeId) {
                item.isMainTime = true
              } else {
                item.isMainTime = false
              }
            })
          } else {
            list2.forEach(item => {
              if (item.detailId == lognTimeId2) {
                item.isMainTime = true
              } else {
                item.isMainTime = false
              }
            })
          }
          items.list = [...list1, ...list2]
          // items.list.forEach(item => {
          //   arr1 = data.filter(val => !val.cardId)
          //   arr2 = data.filter(val => val.cardId)
          //   if (arr1.length > 0) {
          //     let times = 0
          //     let obj = {};
          //     arr1.forEach(val => {
          //       val.list.forEach(v => {
          //         if (v.itemServiceDuration > times) {
          //           times = v.itemServiceDuration
          //           obj = v
          //         }
          //       })
          //     })

          //     if (item.detailId == obj.detailId) {
          //       item.isMainTime = true
          //     } else {
          //       item.isMainTime = false
          //     }
          //   } else {
          //     if (arr2.length > 0) {
          //       let times = 0
          //       let obj = {};
          //       arr2.forEach(val => {
          //         val.list.forEach(v => {
          //           if (v.itemServiceDuration > times) {
          //             times = v.itemServiceDuration
          //             obj = v
          //           }
          //         })
          //       })
          //       if (item.detailId == obj.detailId) {
          //         item.isMainTime = true
          //       } else {
          //         item.isMainTime = false
          //       }
          //     }
          //   }
          // })
        })
        this.detailList = data
      }
    },
    async toSubmit () {
      let res = await saveSubscribeInfo({
        customerMsg: this.detailList[0].customerMsg,
        subscribeId: this.selectUid,
      })
      if (res) {
        this.msgSuccess('操作成功')
        this.closeBox()
      }
    },
    closeBox () {
      this.$emit('toCloseDialog')
    }
  }
}
</script>

<style lang="scss" scoped>
.lifeProjectDetail_content {
  width: 100%;
  .lifeProjectDetail_title {
    font-size: 12px;
    margin-bottom: 20px;
  }
}
.life_detail_list {
  .life_detail_item {
    &:not(:last-child) {
      margin-bottom: 20px;
    }
    .life_detail_item_top {
      display: flex;
      align-items: center;
      padding: 0 10px;
      height: 40px;
      background-color: #e9e9e9;
      font-size: 12px;
      color: #333;
      .life_detail_item_top_1 {
        flex: 2;
      }
      .life_detail_item_top_2 {
        flex: 3;
      }
      .life_detail_item_top_3 {
        flex: 2;
      }
      .life_detail_item_top_4 {
        flex: 2;
      }
    }

    .life_detail_item_remak {
      background-color: #e9e9e9;
      display: flex;
      padding: 10px;
      color: #333;
      font-size: 12px;
      .life_detail_item_remak_content {
        flex: 1;
        overflow: hidden;
      }
    }
  }
}
</style>